<template>
  <div class="monitoring-container">
    <!-- 地区选择器 -->
    <!--    <div class="region-selector">-->
    <!--      <el-cascader-->
    <!--          v-model="selectedRegion"-->
    <!--          :options="regionData"-->
    <!--          :props="cascaderProps"-->
    <!--          placeholder="请选择地区 (省-市-区/县)"-->
    <!--          clearable-->
    <!--          filterable-->
    <!--          @change="handleRegionChange"-->
    <!--          class="region-cascader"-->
    <!--      />-->
    <!--      <span class="region-info" v-if="selectedRegionLabels">-->
    <!--        当前选择: {{ selectedRegionLabels }}-->
    <!--      </span>-->
    <!--    </div>-->
    <!-- 搜索表单 -->
    <div class="search-wrapper">
      <el-form ref="queryFormRef" :model="operationMonitorQueryForm" :inline="true">
        <el-form-item :label="$t('station.stationName')" prop="stationId">
          <el-select
              v-model="operationMonitorQueryForm.stationId"
              :placeholder="
              $t('common.placeholderSelect') + $t('station.stationName')
            "
              clearable
          >
            <el-option
                v-for="(item, index) in stationList"
                :key="index"
                :label="locale ? item.stationCnName : item.stationEnName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('common.gateway')" prop="stationId">
          <el-select
              v-model="operationMonitorQueryForm.stationId"
              :placeholder="
              $t('common.placeholderSelect') + $t('station.stationName')
            "
              clearable
          >
            <el-option
                v-for="(item, index) in stationList"
                :key="index"
                :label="locale ? item.stationCnName : item.stationEnName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-tabs v-model="activeTab" class="monitoring-tabs">
        <el-tab-pane label="储能移动小车" name="independent" class="independent-tab">
          <EnergyStorageLayout type="independent" :region="selectedRegion"/>
        </el-tab-pane>
        <!--        <el-tab-pane label="工商业储能" name="commercial">-->
        <!--          <EnergyStorageLayout type="commercial" :region="selectedRegion" />-->
        <!--        </el-tab-pane>-->
        <!--        <el-tab-pane label="台区储能" name="district">-->
        <!--          <EnergyStorageLayout type="district" :region="selectedRegion" />-->
        <!--        </el-tab-pane>-->
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import {
  getstationListApi,
} from "@/api/ems/station/station.ts";
import {ref, computed, reactive,onMounted} from 'vue'
import EnergyStorageLayout from '@/views/operation-mangement/operationMonitoring/components/EnergyStorageLayout.vue'
import {chinaRegions, getRegionPathName} from '@/views/operation-mangement/operationMonitoring/data/chinaRegions.js'

const activeTab = ref('independent')
const selectedRegion = ref([])
const operationMonitorQueryForm = reactive({
  stationId:null
})
// 级联选择器配置
const cascaderProps = {
  expandTrigger: 'hover',
  checkStrictly: false,
  emitPath: true,
  label: 'label',
  value: 'value',
  children: 'children'
}

// 处理地区变化
const handleRegionChange = (value) => {
  console.log('地区选择变化:', value)
}
//场站部分
const stationList = ref([])
const getStationList = () => {
  getstationListApi().then((res) => {
    stationList.value = res.data;
  });
};
// 获取地区标签
const selectedRegionLabels = computed(() => {
  return getRegionPathName(selectedRegion.value)
})
onMounted(()=>{
  getStationList()
})
// 使用完整的中国行政区划数据
const regionData = chinaRegions
</script>
<style scoped>
.monitoring-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

.region-selector {
  flex-shrink: 0;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  box-sizing: border-box;
}

.region-cascader {
  width: 300px;
}

.region-info {
  color: #606266;
  font-size: 14px;
}

.main-content {
  flex: 1;
  padding: 16px 20px 20px 20px;
  overflow: hidden;
  box-sizing: border-box;
  height: calc(100vh - 110px);
}

.monitoring-tabs {
  height: 100%;

  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-tabs__content) {
  height: calc(100% - 90px);
  overflow: visible; /* 允许子组件滚动 */
  display: flex;
  flex-direction: column;
}

:deep(.el-tab-pane) {
  height: 100%;
  overflow: visible; /* 允许子组件滚动 */
}

@media (max-width: 768px) {
  .region-selector {
    flex-direction: column;
    align-items: stretch;
  }

  .region-cascader {
    width: 100%;
  }

  .main-content {
    padding: 10px;
  }
}

/* 独立储能标签位置调整 */
/* 方法1: 使用transform来移动标签 */
:deep(.el-tabs__header .el-tabs__nav .el-tabs__item:first-child) {
  transform: translateX(20px) !important;
}

/* 方法2: 使用padding-left */
:deep(.el-tabs__item[aria-controls="pane-independent"]) {
  padding-left: 20px !important;
}

/* 方法3: 使用margin-left */
:deep(.el-tabs__nav > .el-tabs__item:first-child) {
  margin-left: 20px !important;
}
</style>